<template>
<div class="seckill-wrap">
    <van-swipe :autoplay="5000">
        <van-swipe-item v-for="(image, index) in swipeImage" style="height:100%;" :key="index">
            <img class="swipeimage" :src="image.image" style="width:100%" />
        </van-swipe-item>
    </van-swipe>

    <van-notice-bar text="通知内容" left-icon="volume-o" />
    <!-- srart plank  -->
    <div class="clearfix" style="padding: 2px 0;border-top: 3px solid rgba(170,170,170,.1);border-bottom: 3px solid rgba(170,170,170,.1);background-color: white;">
        <div class="l" style="style: hieght: 25px;">
            <span style="padding-left: 2px;"><img style="height: 25px;" src="http://ymshosss.oss-cn-shanghai.aliyuncs.com/woellphpwmXz2R1568180538190911.png"></span>
        </div>
        <!-- <div class="r">
            <router-link to="./seckill">
                <span style="text-align: right;line-height: 27px;">
                    更多
                    <van-icon name="arrow" />
                    &nbsp;
                    &nbsp;
                </span>
            </router-link>
        </div> -->
    </div>
    <seckillTabs :allGoods="hotData" @getDetails="getDetails" />
    <!-- start bannerSwipe 广告 -->
    <div class="banner-swipe">
        <van-swipe :autoplay="3000">
            <van-swipe-item class="clearfix" v-for="(image, index) in bannerImage" :key="index">
                <img class="banner-swipeimage" :src="image.image" style="width:100%" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <!-- end bannerSwipe 广告 -->
    <!-- start 年秒抢 -->
    <div class="clearfix" style="padding: 2px 0;border-top: 3px solid rgba(170,170,170,.1);border-bottom:3px solid rgba(170,170,170,.1);background-color: white;">
        <div class="l" style="style: hieght: 25px;">
            <span style="padding-left: 2px;"><img style="height: 25px;" src="http://ymshosss.oss-cn-shanghai.aliyuncs.com/WioE9php9C1Daq1568180854190911.png"></span>
        </div>
        <!-- <div class="r">
            <router-link to="./seckill">
                <span style="text-align: right;line-height: 27px;">
                    更多
                    <van-icon name="arrow" />
                    &nbsp;
                    &nbsp;
                </span>
            </router-link>
        </div> -->
    </div>
    <div>
        <seckillGoods :GoodsData="yearData" @getSeckillGoods="getDetails" />
    </div>

    <!-- End 年秒抢 -->
    <!-- srart banner  -->
    <div class="banner-swipe">
        <van-swipe :autoplay="3000">
            <van-swipe-item class="clearfix" v-for="(image, index) in bannerImage2" :key="index">
                <img class="banner-swipeimage" :src="image.image" style="width:100%" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <!-- end banner  -->
    <!-- srart plank  -->
    <div class="plank">
        <div class="group-wrap">
            <div class="title">秒抢榜</div>
            <van-tabs v-model="active" @click="onSwitchTab">
                <van-tab title="全年秒抢" v-if="seckillList">
                    <!-- S goods -->
                    <div class="goodsList" style="padding-top: 10px" v-for="(item,index) in seckillList" :key="index">
                        <div class="goods-item clearfix">
                            <div class="goods-item-image l" style="width: 15%">
                                <van-image width="50px" height="50px" round :src="item.user.avatar ? item.user.avatar : 'https://img.yzcdn.cn/vant/cat.jpeg' "  />
                            </div>
                            <div class="goods-item-container l clearfix" style="width: 80%;line-height: 50px;">
                                <div class="l" style="font-sieze: 15px"><span style="font-size: 15px">{{ item.user.nickname[0]+ '**' }}</span> 刚刚抢购成功</div>
                                <div class="r" style="color: #666">{{ item.user.mobile }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="seckillList.length == 0" class="text-center" style="padding: 1.4286rem">
                        暂无
                    </div>
                    <!-- E goods -->
                </van-tab>
                <van-tab title="爆品秒抢" v-if="seckillList">
                <!-- S goods -->
                <div class="goodsList" style="padding-top: 10px" v-for="(item,index) in seckillList" :key="index">
                    <div class="goods-item clearfix">
                        <div class="goods-item-image l" style="width: 15%">
                            <van-image width="50px" height="50px" round :src="item.user.avatar ? item.user.avatar : 'https://img.yzcdn.cn/vant/cat.jpeg' "  />
                        </div>
                        <div class="goods-item-container l clearfix" style="width: 80%;line-height: 50px;">
                            <div class="l" style="font-sieze: 15px"><span style="font-size: 15px">{{ item.user.nickname[0]+ '**' }}</span> 刚刚抢购成功</div>
                            <div class="r" style="color: #666">{{ item.user.mobile  }}</div>
                        </div>
                    </div>
                </div>
                <div v-if="seckillList.length == 0" class="text-center" style="padding: 1.4286rem">
                    暂无
                </div>
                <!-- E goods -->

                </van-tab>
            </van-tabs>
        </div>
    </div>
    <copyright />
    <c-footer></c-footer>
</div>
</template>

<script>
import seckillTabs from "@/components/seckillTabs";
import seckillGoods from '@/common/goods/seckill'
import {
    Overlay
} from 'vant';

export default {
    name: "Seckill",
    data() {
        return {
            active: 0,
            show: true,
            bannerImage: [],
            swipeImage: [],
            bannerImage2:[],
            hotData: null, // 爆品秒抢
            yearData: null, //年秒抢
            wrap_width: null,
            seckillList: []
        };
    },
    components: {
        seckillTabs,
        seckillGoods
    },
    created() {
        this.getseckillUser('Year');
    },
    mounted() {
        this.getData();
        this.getSwiperData();
        this.getBannerData();
    },
    methods: {
        getseckillUser(type){
            let params = {
                token: sessionStorage.getItem('token')
            }
            this.axios.get('/api/store/seckill/logs/'+type,{params}).then(res=>{
                this.seckillList = res.data.data;
            }).catch(err=>{
                if(err.response.data.code == 403){
                    this.seckillList = [];
                }
            })
        },
        onSwitchTab(e){
           if(e == 0){
            this.getseckillUser('Year')
        }else {
            this.getseckillUser('Explosive')
        }
        },
        getSwiperData() {
            let params = {};
            params.token  = this.accessToken
            this.axios.get('/api/store/user/swiper/seckillSwiper',{params}).then(result => {
                this.swipeImage = result.data.data
            })
        },
        getBannerData() {
            this.axios.get('/api/store/user/swiper/seckBanner', {
                token: this.accessToken
            }).then(result => {
                this.bannerImage = result.data.data
            })
            this.axios.get('/api/store/user/swiper/bannerImage2', {
                token: this.accessToken
            }).then(result => {
                this.bannerImage2 = result.data.data
            })
        },
        getData() {
            let token = this.global.state.accessToken || sessionStorage.getItem("token");
            this.axios.get('/api/store/seckill/hot/?token=' + token)
                .then(res => {
                    if (res.data.code == 200) {
                        this.hotData = res.data.data
                    }
                })
                .catch(err => {
                    console.log(err)
                })

            this.axios.get('/api/store/seckill/year/?token=' + token)
                .then(res => {
                    if (res.data.code == 200) {
                        this.yearData = res.data.data
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        getDetails(e) {
            this.$router.push({
                path: '../product/seckill'
            })
            this.global.state.seckillGoodsData = e;
        }
    }
};
</script>

<style scoped>
.swipeimage {
    width: 100%;
    height: 183px;
    z-index: -1;
}

.seckill-wrap {
    padding-bottom: 0.7143rem;
}
</style>
